<script>
/*
* 作废
* 时间：2024年12月4日 15点17分
**/
import QSGDrawer from "@/components/QSGDrawer/index.vue";
import AiHumanWebRenderer from "@/views/aihuman/HumanAssets/actionType/aiHumanWebRenderer/test.vue";
import {uploadFile} from "@/api/aihuman/common/minio";
import {addActionBatch} from "@/api/aihuman/humanAssets/actionType";

export default {
  name: "AddActionBatch",
  components: {AiHumanWebRenderer, QSGDrawer},
  data() {
    return {
      loading: false,
      showDrawer: false,
      title: '批量新增',
      filePath: '',
      groupId: '',
      checkAll: false,
      isIndeterminate: false,
      leftData: [],
      rightData: []
    }
  },
  methods: {
    open(groupId) {
      this.groupId = groupId
      this.showDrawer = true
      this.rightData = []
      this.leftData = []
    },
    getAnimateData(data) {
      this.leftData = data.map(item => {
        return {
          ...item,
          checked: false
        }
      })
      console.log(this.leftData);

    },
    handleCheckAllChange(val) {
      console.log(val);
      if (val) {
        this.leftData.forEach(item => {
          item.checked = true
        })
      } else {
        this.leftData.forEach(item => {
          item.checked = false
        })
      }
    },
    changeCheck(val) {
      let selectList = this.leftData.filter(item => item.checked)

      if (this.leftData.length === selectList.length) {
        this.checkAll = true
      } else {
        if (val) {
          this.isIndeterminate = true
        } else {
          this.isIndeterminate = false
          this.checkAll = false
        }
      }
    },
    addSelected() {
      this.rightData = this.leftData.filter(item => item.checked)
      this.leftData = []
    },
    addRightData(item) {
      this.rightData.push(item)
      this.leftData = this.leftData.filter(el => el.uuid !== item.uuid)
    },
    removeItem(item) {
      this.rightData = this.rightData.filter(el => el.uuid !== item.uuid)
      this.leftData.push(item)
    },
    async saveActionBatch() {
      if (this.rightData.length === 0) {
        this.$message.error('请选择数据')
        return
      }
      this.loading = true
      const params = this.rightData.map(el => {
        return {
          animateFile: this.filePath,
          actionType: 1,
          actionName: el.name,
          actionIdUe: el.name,
          actionSecond: el.duration.toFixed(0),
          actionVideoLink: '',
          actionTag: '',
          actionGroupId: this.groupId,
          status: 0
        }
      })
      const {data} = await addActionBatch(params)
      this.$message.success(data.msg)
      this.loading = false
      this.showDrawer = false
      this.$emit('save')

    },
    async uploadActionFile(file) {
      this.loading = true
      let formData = new FormData()
      formData.append('file', file.file)
      formData.append('keyFolderPath', `HumanAssets/actionType/${this.groupId}`)
      const {data} = await uploadFile(formData)
      this.filePath = data.data.filePath
      this.loading = false
    }
  }
}
</script>

<template>
  <q-s-g-drawer
    ref="drawer"
    :visible.sync="showDrawer"
    size="1000px"
    :title="title"
  >
    <el-row :gutter="20">
      <el-col :span="8">
        <div style="display: flex;justify-content: center; align-items: center; width: 100%;">
          <el-upload
            action=""
            :http-request="uploadActionFile"
            :show-file-list="false"
            :disabled="loading"
            style="width: 100%;"
          >
            <el-button size="small" type="primary" :loading="loading">上传动作模型</el-button>
          </el-upload>
        </div>

        <ai-human-web-renderer
          v-if="filePath"
          :url="`${window.location.origin}/${filePath}`"
          width="310"
          height="400"
          @onLoaded="getAnimateData"
        />
        <div v-else class="file-box">
          请上传glb文件
        </div>
      </el-col>
      <el-col :span="8">
        <div class="data-box">
          <header>模型解析列表</header>
          <div class="data-box-body">
            <header>
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
              </el-checkbox>

              <el-button type="text" @click="addSelected">添加选中</el-button>
            </header>
            <ul class="action-left">
              <li v-for="item in leftData" :key="item.uuid">
                <span>
                  <el-checkbox v-model="item.checked" @change="changeCheck"></el-checkbox>
                  {{ item.name }}
                </span>
                <div>
                  <!--                  <el-button type="text" disabled>预览</el-button>-->
                  <el-button type="text" @click="addRightData(item)">添加</el-button>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="data-box">
          <header>添加动作列表</header>
          <div class="data-box-body">
            <header>
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
              </el-checkbox>
            </header>
            <ul class="action-left">
              <li v-for="item in rightData" :key="item.uuid">
                <span>
                  <el-checkbox v-model="item.checked" @change="changeCheck"></el-checkbox>
                  {{ item.name }}
                </span>
                <div>
                  <!--                  <el-button type="text" disabled>生成</el-button>-->
                  <el-button type="text" @click="removeItem(item)">移除</el-button>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>
    <template #footer>
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="small"
        :loading="loading"
        @click="saveActionBatch"
      >保 存
      </el-button>
      <el-button
        type="default"
        icon="el-icon-circle-close"
        size="small"
        :loading="loading"
        @click="showDrawer = false"
      >取 消
      </el-button>
    </template>
  </q-s-g-drawer>
</template>

<style scoped lang="scss">
.action-left {
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    display: flex;
    align-items: center;
    padding-left: 10px;
    height: 40px;
    justify-content: space-between;
  }
}

.file-box {
  width: 310px;
  height: 400px;
  background: #FAFAFA;
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-box-body {
  padding: 10px;
  height: calc(100vh - 250px);
  overflow: auto;

  header {
    display: flex;
    justify-content: space-between;
  }
}

.data-box {
  border: 1px solid #dedede;

  header {
    height: 40px;
    display: flex;
    font-size: 14px;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid #dedede;
    justify-content: space-between;
  }

}
</style>
